<template>
	<div>
		<card v-if="$store.state.superAdmin == 'true'" style="margin-bottom:10px">
	      	<el-select style="width:100%" v-model="museumId" @change="change" filterable>
	        	<el-option
	              	v-for="item in museumList"
	              	:key="item.id"
	              	:label="item.name"
	              	:value="item.id">
	            </el-option>
	      	</el-select>
  		</card>
  		<Card>
  			<Button type="primary" @click="add">添加商品类型</Button>
  			<Table class="table" :loading="loading1" highlight-row :columns="columns" :data="data"></Table>
  		</Card>
  		<Modal title="商品类型管理" v-model="modal1" width="70">
	     	<Form ref="form" :model="newData" :label-width="120">
		        <FormItem label="商品类型名称：" prop="name">
		          	<Input v-model="newData.name" clearable></Input>
		        </FormItem>
		        <FormItem label="商品类型图标：" prop="ico">
		          	<vue-uploadimg :imgUrl="imgUrl" :clear="clear" @uploadImg="uploadImg"></vue-uploadimg>
		        </FormItem>
		    </Form>
	      	<div slot="footer">
	        	<Button class="Button" type="primary" @click="submit" :loading="loading2">提交</Button>
	      	</div>
    	</Modal>

	</div>
</template>

<script>
  	export default {
    	data() {
      		return {
      			museumId: '',
      			museumList: [],
      			loading1: false,
      			loading2: false,
      			columns: [
      				{ title: "商品类型名称", key: "name", align: "center", width: 200 },
      				{
			          title: "商品类型图标",
			          key: "mainPic",
			          align: "center",
			          minWidth: 200,
			          render: (h, params) => {
			            return h("img", {
			              style: {
			                width: "50px",
			              },
			              attrs: {
			                src: this.prefix + params.row.ico
			              }
			            });
			          }
			        },
      				{
			          title: "操作",
			          align: "center",
			          width: 270,
			          render: (h, params) => {
			            return h("div", [
			            	h(
			                "Button",
			                {
			                  style: {
			                  	marginRight: '10px'
			                  },
			                  props: {
			                    type: "warning",
			                  },
			                  on: {
			                    click: () => {
			                      this.update(params);
			                    }
			                  }
			                },
			                "修改"
			              ),
			              h(
			                "Button",
			                {
			                  props: {
			                    type: "error",
			                  },
			                  on: {
			                    click: () => {
			                      this.del(params);
			                    }
			                  }
			                },
			                "删除"
			              ),
			            ]);
			          }
			        }
      			],
      			data: [],
      			modal1: false,
      			newData: {
					ico: '',
					name: '',
      			},
      			imgurl: '',
      			clear: true,
      			id: '',





      		}
      	},
      	created() {
    		if (this.$store.state.superAdmin == "true") {
      			this.getMuseumList();
    		} else {
      			this.museumId = this.$store.state.museumId;
      			this.getMallCategory()
			}
  		},
      	methods:{
      		// 获取博物馆列表
		    getMuseumList() {
		      this.loading1 = true;
		      this.$http("/stage/museum/getAppMuseumDropDown", {}, "post", res => {
		        if (res.data.code == 200) {
		          this.museumList = res.data.data;
		          for (let i = 0; i < this.museumList.length; i++) {
		            if (this.museumList[i].name.length > 20) {
		              this.museumList[i].name =
		                this.museumList[i].name.slice(0, 20) + "...";
		            }
		          }
		          this.museumId = this.museumList[0].id;
		          this.getMallCategory()
		        } else {
		          this.$Message.error(res.data.msg);
		        }
		      });
		    },
		    change(){
		    	this.getMallCategory();
		    },
		    add(){
		    	this.modal1 = true
		    	this.newData = {
					ico: '',
					name: '',
		    	}
		    	this.imgurl = ''
		    	this.clear = ! this.clear
		    },
		    getMallCategory(){
		    	this.loading1 = true
		    	this.$http(
		        "/stage/category/getMallCategory",
		        {
		          	museumId: this.museumId,
		        },
		        "get",
		        res => {
		          	if (res.data.code == 200) {
		            	this.data = res.data.data
		          	} else {
		            	this.$Message.error(res.data.msg);
		          	}
		          	this.loading1 = false;
		        });
		    },
		    del(params){
		    	this.$Modal.confirm({
			        title: "提示",
			        content:
			          	"<p>确定要删除类型<strong> " +
			          	params.row.name +
			          	" </strong>吗？</p>",
			        onOk: () => {
			          	this.loading = true;
			          	this.$http(
			            "/stage/category/deleteMallCategory",
			            {
			            	appMuseumId: this.museumId,
			              	id: params.row.id
			            },
			            "post",
			            res => {
			              if (res.data.code == 200) {
			                this.$Message.success("删除类型成功");
			                this.getMallCategory();
			              } else {
			                this.$Message.error(res.data.msg);
			              }
			            }
			          );
			        },
			        onCancel: () => {}
			    });
		    },
		    submit(){
		    	if(this.newData.name == ''){
		    		this.$Message.error('商品类型名称不能为空');
		    		return false
		    	}
		    	if(this.newData.ico == ''){
		    		this.$Message.error('商品类型图标需要上传');
		    		return false
		    	}
		    	let data = {
					appMuseumId: this.museumId,
					ico: this.newData.ico,
					name: this.newData.name
		    	}
		    	this.loading2 = true
		    	if(this.id == ''){
		    		this.$http(
			        "/stage/category/saveMallCategory",
			        data,
			        "post",
			        res => {
			          	if (res.data.code == 200) {
			            	this.$Message.success('新增商品类型成功');
			            	this.modal1 = false
			            	this.getMallCategory()
			          	} else {
			            	this.$Message.error(res.data.msg);
			          	}
			          	this.loading2 = false;
			        });
		    	}else{
		    		data.id = this.id
		    		this.$http(
			        "/stage/category/updateMallCategory",
			        data,
			        "post",
			        res => {
			          	if (res.data.code == 200) {
			            	this.$Message.success('修改商品类型成功');
			            	this.modal1 = false
			            	this.getMallCategory()
			          	} else {
			            	this.$Message.error(res.data.msg);
			          	}
			          	this.loading2 = false;
			        });
		    	}
		    },
		    update(data){
		    	this.newData = {
		    		ico: data.row.ico,
					name: data.row.name
		    	}
		    	this.modal1 = true
		    },
    		uploadImg(data) {
      			this.newData.ico = data;
   		 	}






      	}
    }
</script>

<style scoped></style>